<template>
    <div class="dashboard-container">
      <div class="app-container">
        <div class="edit-form">
          <el-form ref="userForm" :rules="rules" label-width="220px" :model="userInfo">
            <!-- 姓名 部门 -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="姓名" prop="username">
                  <el-input v-model="userInfo.username" size="mini" class="inputW" />
                </el-form-item>
              </el-col>
  
            </el-row>
            <!-- 工号 入职时间 -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="工号" prop="workNumber">
                  <el-input disabled v-model="userInfo.workNumber" size="mini" class="inputW" />
                </el-form-item>
              </el-col>
            </el-row>
            <!--手机 聘用形式  -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="手机" prop="mobile">
                  <el-input
                    size="mini"
                    class="inputW"
                    v-model="userInfo.mobile"
                    :disabled="employeeId ? true : false"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="部门" prop="departmentId">
                  <!-- 放置及联部门组件 -->
                    <SelectTree v-model="userInfo.departmentId" class="inputW"></SelectTree>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="聘用形式" prop="formOfEmployment">
                  <el-select v-model="userInfo.formOfEmployment" size="mini" class="inputW" >
                    <el-option label="正式" :value="1" />
                    <el-option label="非正式" :value="2" />
                </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="入职时间" prop="timeOfEntry">
                  <el-date-picker
                    size="mini"
                    type="date"
                    value-format="yyyy-MM-dd"
                    class="inputW"
                    v-model="userInfo.timeOfEntry"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="转正时间" prop="correctionTime">
                  <el-date-picker
                    size="mini"
                    type="date"
                    class="inputW"
                    v-model="userInfo.correctionTime"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 员工照片 -->
            <el-row>
              <el-col :span="12">
                <el-form-item label="员工头像">
                  <!-- 放置上传图片 -->
                  <UploadAvator v-model="userInfo.staffPhoto"></UploadAvator>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 保存个人信息 -->
            <el-row type="flex">
              <el-col :span="12" style="margin-left:220px">
                <el-button size="mini" type="primary" @click="confirm">保存更新</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
  
      </div>
    </div>
  </template>
  
  <script>
  import SelectTree from './components/select-tree.vue'
  import UploadAvator from './components/uploadAvator.vue'
  import {addEmployee, getEmployeeDetail, uploadEmployee} from '@/api/employee'
  export default {
    
    data() {
        return {
            // 表单数据
            userInfo: {
                username: '', // 用户名
                mobile: '', // 手机号
                workNumber: '', // 工号
                formOfEmployment: null, // 聘用形式
                departmentId: null, // 部门id
                timeOfEntry: '', // 入职时间
                correctionTime: '' ,// 转正时间
                staffPhoto: 'https://pic2.zhimg.com/v2-e69f56f111d0c5ac7d5d35c1bb99907d_r.jpg?source=1940ef5c'
            },
            // 校验数据
            rules: {
                username: [
                    { required: true, message: '用户名不能为空', trigger: 'blur' },
                    { min: 1, max: 4, message: '姓名为1-4位', trigger: 'blur'}
                ],
                mobile: [
                    { required: true, message: '手机号不能为空', trigger: 'blur'},
                    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确',trigger: 'blur'}
                ],
                formOfEmployment: [
                    { required: true, message: '请选择聘用形式', trigger: 'blur' }
                ],
                departmentId: [
                    { required: true, message: '请选择部门', trigger: 'blur' }
                ],
                timeOfEntry: [
                    { required: true, message: '请选择入职时间', trigger: 'blur' }
                ],
                correctionTime: [
                    { required: true, message: '请选择转正时间', trigger: 'blur' },
                     {
                    validator: (rule, value, callback) => {
                        if (this.userInfo.timeOfEntry) {
                        if (new Date(this.userInfo.timeOfEntry) > new Date(value)) {
                            callback(new Error('转正时间不能小于入职时间'))
                            return
                        }
                        }
                        callback()
                }
                }]
            }

        }
    },
    methods: {
      // 提交按钮逻辑
       confirm() {
        this.$refs.userForm.validate( async (valid) => {
          // console.log(this.userInfo.departmentId);
            if (valid) {
                if (this.employeeId)  {
                  // 更新修改
                  const res  = await uploadEmployee(this.userInfo)
                  this.$message.success('更新成功')
                }
                else {
                  // 提交新增
                 const res = await addEmployee( this.userInfo)
                 this.$message.success('新增成功')
                }
                this.$router.push('/employee')
            }
        })
       },
       async getemployeeDetail() {
          // 获取员工详情
         const res = await getEmployeeDetail(this.employeeId)
         console.log(res);
         this.userInfo = res
       },
    },
    components: {
        SelectTree,
        UploadAvator
    },
    computed: {
      employeeId(){
        return this.$route.params.id
      }
    },
    created() {
      console.log(this.employeeId);
      // 判断是否是修改编辑
      this.employeeId && this.getemployeeDetail()
    }
  }
  </script>
  
  <style scoped lang="scss">
      .edit-form {
        background: #fff;
        padding: 20px;
        .inputW {
          width: 380px
        }
      }
  
  </style>